<!-- 微信自定义头部组件 -->
<template>
  <view>
    <view :style="{ height: totalHeight + 'px' }" class="wx_header_box">
      <slot name="all"></slot>
      <view :style="{ height: statusHeight + 'px' }"></view>
      <view :style="{ height: intervalHeight + 'px' }"></view>
      <view
        :style="{ height: capsuleHeight + 'px' }"
        class="wx_header_box_capsule"
        :class="{ title_left: is_left }"
      >
        <div class="wx_header_box_capsule_back" @tap="back" v-if="isBack">
          <u-icon
            name="arrow-left"
            :bold="true"
            size="32rpx"
            :color="color"
          ></u-icon>
        </div>
        <span :style="{ color: color, 'font-weight': 700 }">{{ title }}</span>
        <picker
          v-if="isTime"
          mode="date"
          fields="month"
          :value="date"
          @change="bindDateChange"
        >
          <view class="uni-input flex_row"
            >{{ date + "月" }}
            <u-icon name="arrow-down" size="16" color="black"></u-icon>
          </view>
        </picker>
        <view
          class="search"
          @tap.stop="toSearch"
          v-if="isSearch"
          :style="{ left: left }"
        >
          <u-input
            :disabled="isDisabled"
            color="#fff"
            border="none"
            placeholder="这里输入关键字搜索"
            shape="circle"
            clearable
            :customStyle="inputStyle"
            placeholderClass="placeholderClass"
            v-model="searchContent"
            @confirm="search"
            prefixIconStyle="font-size: 22px;color: #fff"
            prefixIcon="search"
          >
          </u-input>
        </view>
      </view>
      <view style="height: 4px"></view>
    </view>
    <view :style="{ height: totalHeight + 'px' }" style="width: 100%"></view>
  </view>
</template>

<script>
export default {
  name: "self-wx-header",
  watch: {
    inputWidth: {
      handler(e) {
        this.inputStyle.width = e + "px";
      },
      immediate: true,
    },
  },
  data() {
    return {
      inputStyle: {
        background: "#717371",
        height: "64rpx",
        width: 0,
        paddingLeft: "32rpx",
        paddingRight: "32rpx",
      },
      searchContent: "",
      flag: null,
      date: this.getDate({
        format: true,
      }),
      statusHeight: 0,
      capsuleHeight: 0,
      intervalHeight: 0,
      totalHeight: 0,
    };
  },
  props: {
    isDisabled: {
      default: false,
    },
    left: {
      type: String,
      default: "32rpx",
    },
    inputWidth: {},
    color: {
      type: String,
      default: "#333333",
    },
    font_weight: {
      type: String,
      default: "0",
    },
    title: {
      type: String,
      default: "",
    },
    isBack: {
      type: Boolean,
      default: false,
    },
    is_left: {
      type: Boolean,
      default: false,
    },
    isTime: {
      type: Boolean,
      default: false,
    },
    isSearch: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    let value = wx.getMenuButtonBoundingClientRect();
    this.statusHeight = uni.getSystemInfoSync().safeAreaInsets.top;
    this.intervalHeight = value.bottom - this.statusHeight - value.height;
    this.capsuleHeight = value.height;
    this.totalHeight =
      this.statusHeight + this.capsuleHeight + this.intervalHeight + 4;
    this.$emit("getHeight", this.totalHeight);
  },
  methods: {
    toSearch() {
      this.$emit("toSearch", this.searchContent);
    },
    search(e) {
      if (this.flag) {
        clearTimeout(this.flag);
      }
      this.flag = setTimeout(() => {
        this.$emit("search", e);
      }, 400);
    },
    back() {
      uni.navigateBack();
    },
    bindDateChange(e) {
      // console.log(e)
      this.date = e.detail.value;
      this.$emit("senTime", e.detail.value);
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      return `${year}-${month}`;
    },
  },
};
</script>

<style lang="scss">
.search {
  position: absolute;
  left: 32rpx;
}

.title_left {
  justify-content: flex-start !important;
  padding: 0 30rpx;
}

.wx_header_box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;

  & > view {
    width: 100%;
  }

  &_capsule {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36rpx;

    &_back {
      position: absolute;
      left: 24rpx;
    }
  }
}
</style>
